import React, { PureComponent } from 'react';
import "../styles/Good.scss"
import { goodlist, goodlikelist, cart_add, defaultAddress, good } from "../api/index"

import { NavBar, Space, Swiper, Toast, Image } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'

class Good extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            display1: false,
            list: [],
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <MoreOutline />
                    </Space>
                </div>
            ),
            pics: [], price: 0, sales: 0, brand: '', category: '', proname: '', proid: '',
            province: '', city: '', county: ''
        }
    }
    async componentDidMount() {
        let res = await goodlist();
        let res2 = res.data.data.find((item) => {
            return item.proid === this.props.location.state.id
        });
        console.log(res2, 'aaaa', this.props);
        let aa = await good({ proid: this.props.location.state.id })
        console.log('产品详情', aa);
        let res3 = await goodlikelist();
        if (res2) {
            this.setState({
                pics: [res2.img1, res2.img2, res2.img3, res2.img4],
                price: res2.originprice,
                sales: res2.sales,
                brand: res2.brand,
                category: res2.category,
                proname: res2.proname,
                proid: res2.proid,
                list: res3.data.data
            });
        }
        let defaultres = await defaultAddress({ userid: localStorage.getItem('userid') });
        console.log(defaultres)
        if (defaultres.data.data) {
            this.setState({
                province: defaultres.data.data[0].province,
                city: defaultres.data.data[0].city,
                county: defaultres.data.data[0].county,
            })
        }
    }
    async cartadd() {
        let res = await cart_add({ userid: localStorage.getItem('userid'), proid: this.state.proid, num: 1 })
        if (res.data.code === 200) {
            Toast.show('加入成功')
        }
    }
    goGood(item) {
        this.setState({
            pics: [item.img1, item.img2, item.img3, item.img4],
            price: item.originprice,
            sales: item.sales,
            brand: item.brand,
            category: item.category,
            proname: item.proname,
            proid: item.proid,
        })
        window.scrollTo({ top: 0 });
    }
    bofang() {
        this.setState({
            display1: !this.state.display1
        })
    }
    render() {
        return (
            <div className='good'>
                <NavBar className='header' right={this.state.right} onBack={() => { this.props.history.go(-1) }}></NavBar>
                {this.state.display1 ? <video id="playChatVideo"  className='video' width="100%" height="200" controls>
                    <source src={require('../video/3theA.mp4')} type="video/mp4"></source>
                </video> : null}
                {
                    this.state.price ?
                        <div className="content">
                            <Swiper className='swiper2'
                                indicator={(total, current) => (
                                    <div className="customIndicator">
                                        {`${current + 1} / ${total}`}
                                        <button onClick={() => { this.bofang() }}>播放</button>
                                    </div>
                                )}

                            >
                                {
                                    this.state.pics.map((item, index) => {
                                        return (
                                            <Swiper.Item key={index}>
                                                <div className="content">
                                                    <img src={item} alt="" />
                                                </div>
                                            </Swiper.Item>
                                        )
                                    })
                                }
                            </Swiper>
                            <div className="info">
                                <div className="top">
                                    <div className="left">￥{this.state.price}</div>
                                    <div className="right">销量： {this.state.sales}</div>
                                </div>
                                <div className="bottom">
                                    <span className="s1">{this.state.brand}</span>
                                    <span className="s2">{this.state.category}</span>
                                    {this.state.proname}
                                </div>
                            </div>
                            <div className="address">
                                <div className="left">
                                    <span>送至</span>
                                    <span>{this.state.city ? (this.state.province + '/' + this.state.city + '/' + this.state.county) : '陕西省/西安市'}</span>
                                </div>
                                <div className="right">＞</div>
                            </div>
                            <div className="like">
                                <div className="title">猜你喜欢</div>
                                <div className="list">
                                    {
                                        this.state.list.map((item, index) => {
                                            return (
                                                <div className="item" key={index} onClick={() => { this.goGood(item) }}>
                                                    <div className="pic">
                                                        <img src={item.img1} alt="" />
                                                    </div>
                                                    <div className="name">{item.proname}</div>
                                                    <div className="price">￥{item.originprice}</div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                            <div className="footer">
                                <div className="tab">
                                    <span>💬</span>
                                    <span>客服</span>
                                </div>
                                <div className="tab">
                                    <span>☺</span>
                                    <span onClick={() => { this.props.history.push('/index/shopcart') }}>购物车</span>
                                </div>
                                <div className="tab">
                                    <span>☆</span>
                                    <span>收藏</span>
                                </div>
                                <div className="btn" onClick={() => { this.cartadd() }}>加入购物车</div>
                            </div>
                        </div>
                        :
                        <Image src='/404' width={100} height={100} />
                }
            </div>
        );
    }
}

export default Good;